<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <link rel="stylesheet" href="./font/people-font/playfont/iconfont.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/people.css">
</head>
<body>
  <!-- 头部 -->
  <header class="header w100">
    <div class="header-box w1600">
      <div class="header-nav">
        <div class="logo">
          <a href="" class="logo-a">
            <img src="images/logo.png" alt="" class="logo-pic" />
          </a>
        </div>
        <nav class="mainnav">
          <ul class="mainnav-ul">
            <li class="mainnav-li active">
              <a href="" class="mainnav-a">音乐馆</a>
            </li>
            <li class="mainnav-li">
              <a href="" class="mainnav-a">我的音乐</a>
            </li>
            <li class="mainnav-li mainnav-pop">
              <a href="" class="mainnav-a">客户端
                <img src="images/mark_1.png" alt="" class="mainnav-img" />
              </a>
              <div class="pop-box">
                <div class="pop-up">
                  <ul class="pop-up-list">
                    <li class="pop-up-items">
                      <i class="pop-bg pop-up1"></i>
                      <span class="pop-text">HQ高品质 全员开启</span>
                    </li>
                    <li class="pop-up-items">
                      <i class="pop-bg pop-up2"></i>
                      <span class="pop-text">独家音效 全面升级</span>
                    </li>
                    <li class="pop-up-items">
                      <i class="pop-bg pop-up3"></i>
                      <span class="pop-text">轻盈视觉 动态皮肤</span>
                    </li>
                    <li class="pop-up-items">
                      <a href="" class="pop-update">下载体验</a>
                    </li>
                  </ul>
                </div>
              </div>
            </li>
            <li class="mainnav-li">
              <a href="" class="mainnav-a">开放平台</a>
            </li>
            <li class="mainnav-li">
              <a href="" class="mainnav-a">VIP</a>
            </li>
          </ul>
        </nav>
        <!-- 搜索框 -->
        <div class="search">
          <form action="">
            <button class="btn-search"></button>
            <input type="text" class="inp-search" name="keywords" id="keywords" autocomplete="off"
              placeholder="搜索音乐、MV、歌单、用户" />
            <div class="search-box">
              <div class="search-menu">
                <ul class="search-list">
                  <li class="search-items">
                    <a href="" class="search-links">
                      <span class="num">1</span>
                      <p class="search-info">我们的歌</p>
                      <span class="count">76.5</span>
                    </a>
                  </li>
                  <li class="search-items">
                    <a href="" class="search-links">
                      <span class="num">2</span>
                      <p class="search-info">红尘客栈</p>
                      <span class="count">176.5</span>
                    </a>
                  </li>
                  <li class="search-items">
                    <a href="" class="search-links">
                      <span class="num">3</span>
                      <p class="search-info">水星记</p>
                      <span class="count">100.9</span>
                    </a>
                  </li>
                  <li class="search-items">
                    <a href="" class="search-links">
                      <span class="num">4</span>
                      <p class="search-info">林俊杰</p>
                      <span class="count">44.5</span>
                    </a>
                  </li>
                  <li class="search-items">
                    <a href="" class="search-links">
                      <span class="num">5</span>
                      <p class="search-info">错位时空</p>
                      <span class="count">106.5</span>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </form>
        </div>
        <!-- 用户功能 -->
        <div class="user-functions">
          <a href="javascript:;" class="login">登录</a>
          <div class="user-menu menu-vip menu-list">
            <span class="menu-content">开通VIP</span>
            <div class="drop-menu">
              <a href="" class="drop-menu-links">开通绿钻豪华版</a>
              <a href="" class="drop-menu-links">开通付费包</a>
            </div>
          </div>
          <div class="user-menu menu-money menu-list">
            <span class="menu-content">充值</span>
            <div class="drop-menu">
              <a href="" class="drop-menu-links">购买乐币</a>
              <a href="" class="drop-menu-links">充值饭票</a>
            </div>
          </div>
        </div>
      </div>
      <!-- 子导航 -->
      <div class="subnav">
        <ul class="subnav-list">
          <li class="subnav-items active">
            <a href="index.html" class="subnav-links">首页</a>
          </li>
          <li class="subnav-items">
            <a href="singer.html" class="subnav-links">歌手</a>
          </li>
          <li class="subnav-items">
            <a href="Newdisc.html" class="subnav-links">新碟</a>
          </li>
          <li class="subnav-items">
            <a href="top.html" class="subnav-links">排行榜</a>
          </li>
          <li class="subnav-items">
            <a href="classify.html" class="subnav-links">分类歌单</a>
          </li>
          <li class="subnav-items">
            <a href="MV.html" class="subnav-links">MV</a>
          </li>
          <li class="subnav-items">
            <a href="radio.html" class="subnav-links">电台</a>
          </li>
          <li class="subnav-items">
            <a href="Album.html" class="subnav-links">数字专辑</a>
          </li>
          <li class="subnav-items">
            <a href="ticket.html" class="subnav-links">票务</a>
          </li>
        </ul>
      </div>
    </div>
  </header>  
  <!-- 个人中心 -->
  <div class="individual">
      <div class="individual-heart">
           <div class="author">
                <div class="author-avatar"><img src="./images/people/g.jpg" alt=""></div>
                <div class="author-name"><span>yy</span></div>
                <div class="author-fans">
                   <div class="author-fans-left">
                       <span>1</span>
                       <p>关注</p>
                   </div>
                   <div class="shu"></div>
                   <div class="author-fans-right">
                       <span>2</span>
                       <p>粉丝</p>
                   </div>
                </div>
           </div>
           <div class="song">
            <ul class="song-ul">
                <li class="song-ul-li"><a href="javascript:;" class="song-ul-li-a active">我喜欢</a></li>
                <li class="song-ul-li"><a href="javascript:;" class="song-ul-li-a">我创建的歌单</a></li>
                <li class="song-ul-li"><a href="javascript:;" class="song-ul-li-a">关注</a></li>
                <li class="song-ul-li"><a href="javascript:;" class="song-ul-li-a">粉丝</a></li>
                <li class="song-ul-li"><a href="javascript:;" class="song-ul-li-a">我上传的视频</a></li>
            </ul>
           </div>
      </div>
  </div>
  <!-- 内容 -->
  <div class="main">
     <div class="main-heart">
         <div class="main-nav">
             <ul class="content-nav-ul">
                <li class="content-nav-ul-li"><a href="javascritpt:;" class="content-nav-ul-li-a active">歌曲</a></li>
                <li class="content-nav-ul-li"><a href="javascritpt:;" class="content-nav-ul-li-a">歌单</a></li>
                <li class="content-nav-ul-li"><a href="javascritpt:;" class="content-nav-ul-li-a">专辑</a></li>
                <li class="content-nav-ul-li"><a href="javascritpt:;" class="content-nav-ul-li-a">视频</a></li>
             </ul>
         </div>
         <div class="main-content">
           <div class="main-content-top">
               <div class="main-content-top-ul">
                <li class="mctu activeBackgroundColor"><i class="iconfont icon-24gl-play"></i><span>播放全部</span></li>
                <li class="mctu hover"><i class="iconfont icon-tianjia"></i><span>添加到</span></li>
                <li class="mctu hover"><i class="iconfont icon-xiazai-wenjianxiazai-05"></i><span>下载</span></li>
                <li class="mctu hover"><i class="iconfont icon-piliangcaozuo"></i><span>批量操作</span></li>
               </div>
           </div>
           <div class="main-content-middle">
             <div class="main-content-middle-ul">
                <li class="mcmu">
                    <p>歌曲</p>
                    <ul class="mcmu-music">
                        <li class="mcmu-music-li">
                        <a href="javascript:;">
                            <span>1</span>
                            Bleeding Love
                        </a>
                        <a href="#">
                            <i class="iconfont icon-24gl-play"></i>
                        </a>
                        <a href="#">
                            <i class="iconfont icon-tianjia"></i>
                        </a>
                    </li>
                        <li class="mcmu-music-li">
                            <a href="javascript:;">
                                <span>2</span>
                                Be What You Wanna Be
                            </a>
                            <a href="#">
                                <i class="iconfont icon-24gl-play"></i>
                            </a>
                            <a href="#">
                                <i class="iconfont icon-tianjia"></i>
                            </a>
                        </li>
                        <li class="mcmu-music-li">
                            <a href="javascript:;">
                                <span>3</span>
                                Lone Ranger
                            </a>
                            <a href="#">
                                <i class="iconfont icon-24gl-play"></i>
                            </a>
                            <a href="#">
                                <i class="iconfont icon-tianjia"></i>
                            </a>
                        </li>
                        <li class="mcmu-music-li">
                            <a href="javascript:;">
                                <span>4</span>
                                樱花树下的约定
                            </a>
                            <a href="#">
                                <i class="iconfont icon-24gl-play"></i>
                            </a>
                            <a href="#">
                                <i class="iconfont icon-tianjia"></i>
                            </a>
                        </li>
                        <li class="mcmu-music-li">
                            <a href="javascript:;">
                                <span>5</span>
                                深海回响
                            </a>
                                <a href="#">
                                    <i class="iconfont icon-24gl-play"></i>
                                </a>
                                <a href="#">
                                    <i class="iconfont icon-tianjia"></i>
                                </a>
                        </li>
                        <li class="mcmu-music-li">
                            <a href="javascript:;">
                                <span>6</span>
                                STAR WALKIN' (Clean)
                            </a>
                            <a href="#">
                                <i class="iconfont icon-24gl-play"></i>
                            </a>
                            <a href="#">
                                <i class="iconfont icon-tianjia"></i>
                            </a>
                        </li>
                        <li class="mcmu-music-li">
                            <a href="javascript:;">
                                <span>7</span>
                                We Don't Talk Anymore
                            </a>
                            <a href="#">
                                <i class="iconfont icon-24gl-play"></i>
                            </a>
                            <a href="#">
                                <i class="iconfont icon-tianjia"></i>
                            </a>
                        </li>
                        <li class="mcmu-music-li">
                            <a href="javascript:;">
                                <span>8</span>
                                只要平凡
                            </a>
                            <a href="#">
                                <i class="iconfont icon-24gl-play"></i>
                            </a>
                            <a href="#">
                                <i class="iconfont icon-tianjia"></i>
                            </a>
                        </li>
                        <li class="mcmu-music-li">
                            <a href="javascript:;">
                                <span>9</span>
                                空城旧梦
                            </a>
                                <a href="#">
                                    <i class="iconfont icon-24gl-play"></i>
                                </a>
                                <a href="#">
                                    <i class="iconfont icon-tianjia"></i>
                                </a>
                            </li>
                        <li class="mcmu-music-li">
                            <a href="javascript:;">
                                <span>10</span>
                                美丽的神话
                            </a>
                            <a href="#">
                                <i class="iconfont icon-24gl-play"></i>
                            </a>
                            <a href="#">
                                <i class="iconfont icon-tianjia"></i>
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="mcmu">
                    <p>歌手</p>
                     <ul class="mcmu-singer">
                        <li class="mcmu-singer-li"><a href="javascript:;">Leona Lewis</a></li>
                        <li class="mcmu-singer-li"><a href="javascript:;">Darin</a></li>
                        <li class="mcmu-singer-li"><a href="javascript:;">Rachel Platten</a></li>
                        <li class="mcmu-singer-li"><a href="javascript:;">柯柯柯啊</a></li>
                        <li class="mcmu-singer-li"><a href="javascript:;">李尧音</a></li>
                        <li class="mcmu-singer-li"><a href="javascript:;">Lil Nas X</a></li>
                        <li class="mcmu-singer-li"><a href="javascript:;">Charlie Puth</a></li>
                        <li class="mcmu-singer-li"><a href="javascript:;">张碧晨</a></li>
                        <li class="mcmu-singer-li"><a href="javascript:;">郑冷冷</a></li>
                        <li class="mcmu-singer-li"><a href="javascript:;">孙楠</a></li>
                     </ul>
                </li>
                <li class="mcmu">
                    <p>专辑</p>
                     <ul class="mcmu-album">
                        <li class="mcmu-album-li"><a href="javascript:;">Pure... Pop (Explicit)</a></li>
                        <li class="mcmu-album-li"><a href="javascript:;">Darin</a></li>
                        <li class="mcmu-album-li"><a href="javascript:;">Fight Song</a></li>
                        <li class="mcmu-album-li"><a href="javascript:;">樱花树下的约定 (热搜版)</a></li>
                        <li class="mcmu-album-li"><a href="javascript:;"></a>深海回响</li>
                        <li class="mcmu-album-li"><a href="javascript:;">STAR WALKIN' (2022英雄联盟全球总决赛主题曲)</a></li>
                        <li class="mcmu-album-li"><a href="javascript:;">Nine Track Mind</a></li>
                        <li class="mcmu-album-li"><a href="javascript:;">只要平凡</a></li>
                        <li class="mcmu-album-li"><a href="javascript:;">Gnasche</a></li>
                        <li class="mcmu-album-li"><a href="javascript:;">神话 电影原声音乐</a></li>
                     </ul>
                </li>
                <li class="mcmu">
                    <p>时长</p>
                    <ul class="mcmu-time">
                        <li class="mcmu-time-li"><a href="javascript:;">04:23</a></li>
                        <li class="mcmu-time-li"><a href="javascript:;">03:31</a></li>
                        <li class="mcmu-time-li"><a href="javascript:;">03:09</a></li>
                        <li class="mcmu-time-li"><a href="javascript:;">03:09</a></li>
                        <li class="mcmu-time-li"><a href="javascript:;">02:55</a></li>
                        <li class="mcmu-time-li"><a href="javascript:;">03:30</a></li>
                        <li class="mcmu-time-li"><a href="javascript:;">03:37</a></li>
                        <li class="mcmu-time-li"><a href="javascript:;">04:06</a></li>
                        <li class="mcmu-time-li"><a href="javascript:;">06:09</a></li>
                        <li class="mcmu-time-li"><a href="javascript:;">04:52</a></li>
                    </ul>
                </li>
             </div>
           </div>
           <div class="main-content-bottom">
              <p>查看更多内容，请下载客户端</p>
              <a href="#">立即下载</a>
           </div>
         </div>
     </div>
  </div>
    <!-- footer -->
    <footer class="footer w100">
        <div class="footer-wrapper w1600">
          <div class="footer-box">
            <!-- 下载客户端 -->
            <div class="footer-update">
              <h5 class="footer-title">下载QQ音乐客户端</h5>
              <ul class="update-list">
                <li class="update-items">
                  <a href="" class="update-links">
                    <i class="update-bg bg1"></i>
                    PC版
                  </a>
                </li>
                <li class="update-items">
                  <a href="" class="update-links">
                    <i class="update-bg bg2"></i>
                    Mac版
                  </a>
                </li>
                <li class="update-items">
                  <a href="" class="update-links">
                    <i class="update-bg bg3"></i>
                    Android版
                  </a>
                </li>
                <li class="update-items">
                  <a href="" class="update-links">
                    <i class="update-bg bg4"></i>
                    iPhone版
                  </a>
                </li>
              </ul>
            </div>
            <!-- 特色产品 -->
            <div class="footer-product">
              <h5 class="footer-title">特色产品</h5>
              <ul class="update-list">
                <li class="update-items">
                  <a href="" class="update-links">
                    <i class="update-bg bg5"></i>
                    全民K歌
                  </a>
                </li>
                <li class="update-items">
                  <a href="" class="update-links">
                    <i class="update-bg bg6"></i>
                    银河音效
                  </a>
                </li>
                <li class="update-items">
                  <a href="" class="update-links">
                    <i class="update-bg bg7"></i>
                    QPlay
                  </a>
                </li>
                <li class="update-items">
                  <a href="" class="update-links">
                    <i class="update-bg bg8"></i>
                    Fan直播伴侣
                  </a>
                </li>
                <li class="update-items">
                  <a href="" class="update-links"> 车载互联 </a>
                </li>
                <li class="update-items">
                  <a href="" class="update-links"> QQ演出 </a>
                </li>
              </ul>
            </div>
            <!-- 合作链接 -->
            <div class="footer-coolink">
              <h5 class="footer-title">合作链接</h5>
              <div class="footer-coolink-box">
                <a href="" class="footer-box-links">CJ ENM</a>
                <a href="" class="footer-box-links">腾讯视频</a>
                <a href="" class="footer-box-links">手机QQ空间</a>
                <a href="" class="footer-box-links">最新版QQ</a>
                <a href="" class="footer-box-links">腾讯社交广告</a>
                <a href="" class="footer-box-links">电脑管家</a>
                <a href="" class="footer-box-links">QQ浏览器</a>
                <a href="" class="footer-box-links">腾讯微云</a>
                <a href="" class="footer-box-links">腾讯云</a>
                <a href="" class="footer-box-links">企鹅FM</a>
                <a href="" class="footer-box-links">智能电视网</a>
                <a href="" class="footer-box-links">当贝市场</a>
                <a href="" class="footer-box-links">酷我音乐</a>
                <a href="" class="footer-box-links">酷狗听书</a>
              </div>
            </div>
            <!-- 开放平台 -->
            <div class="footer-coolink">
              <h5 class="footer-title">开放平台</h5>
              <div class="footer-coolink-box">
                <a href="" class="footer-box-links">QQ音乐开放平台</a>
                <a href="" class="footer-box-links">腾讯音乐人</a>
                <a href="" class="footer-box-links">音乐推</a>
              </div>
            </div>
            <!-- TME集团官网 -->
            <div class="footer-coolink">
              <h5 class="footer-title">TME集团官网</h5>
              <div class="footer-coolink-box">
                <a href="" class="footer-box-links">腾讯音乐</a>
              </div>
            </div>
          </div>
          <div class="footer-coopyright">
            <div class="coopyright-item">
              <a href="" class="footer-box-links">关于腾讯 |</a>
              <a href="" class="footer-box-links">About Tencent |</a>
              <a href="" class="footer-box-links">服务条款 |</a>
              <a href="" class="footer-box-links">用户服务协议 |</a>
              <a href="" class="footer-box-links">隐私政策 |</a>
              <a href="" class="footer-box-links">权利声明 |</a>
              <a href="" class="footer-box-links">广告服务 |</a>
              <a href="" class="footer-box-links">腾讯招聘 |</a>
              <a href="" class="footer-box-links">客服中心 |</a>
              <a href="" class="footer-box-links">网站导航</a>
            </div>
            <div class="coopyright-item">
              Copyright © 1998 - 2022 Tencent.
              <a href="" class="footer-box-links">All Rights Reserved.</a>
            </div>
            <div class="coopyright-item">
              腾讯公司
              <a href="" class="footer-box-links"> 版权所有 |</a>
              <a href="" class="footer-box-links">营业执照 |</a>
              网络文化经营许可证：
              <a href="" class="footer-box-links">粤网文[2020]3396-195号 |</a>
              客服电话:
              <a href="" class="footer-box-links">4006016666</a>
            </div>
          </div>
        </div>
      </footer>
      <!-- 侧边栏 -->
      <aside class="side">
        <a href="" class="side-links">
          <i class="side-bg"></i>
        </a>
        <a href="" class="side-links">反馈</a>
        <a href="" class="side-links">
          <i class="side-bg music"></i>
        </a>
      </aside>
      <script src="./js/ajax.js"></script>
      <script src="./js/people.js"></script>
</body>
</html>